<template>
  <div>
    <header class="navigation">
			<div @click="retreat"><img src="../assets/rightbut.png"></div>
			<div>帮助中心</div>
			<div></div>
		</header>
		
		<div class="way">
			
			<div class="way_d">
				<div v-for='item in list' :class="help == item.code ?'on' :'way_d_d'" @click="helpon(item.code)">{{item.name}}</div>
			</div>
			
		</div>
		<div>
			<div class="title" v-for='item in helplist' @click="helpliston(item.title)">{{item.title}}</div>
		</div>
		
  </div>
</template>

<script>
	import { BaseUrl } from '../Baseurl/common.js';
	import { Toast } from 'mint-ui';
export default {
	  data () {
		    return {
		    	help:'login/reg',
		    	list:[],
		    	helplist:[],
		    }
	  },	
	  created(){
	 		var url = BaseUrl + 'users/helper/categorys';
	 		this.$http.post(url).then(res=>{
//	 			console.log(res.data.data);
	 			if(res.data.code == '10000'){
	 				 this.list = res.data.data
	 			}else{
		 			Toast({
						message: res.data.mag,
						position: 'middle',
						duration: 3000
					})
	 			}
	 		}).catch(error=>{
				Toast({
					message: "网络异常",
					position: 'middle',
					duration: 3000
				})
			})
	 		this.helpC();
	  },
	  methods:{
	  	helpon:function(val){
	  		this.help = val;
	  		this.helplist = [];
	  		this.helpC();
	  	},
	  	helpliston:function(val){
	  		var name = escape(val);
	  		this.$router.push({
	  			path:'/helpdetails',query:{help:this.help,val:name}
	  		})
	  	},
	  	//导航退后
			retreat:function(){
				window.history.go(-1);
			},
			helpC(){
				var url = BaseUrl + 'users/helper/list?code=' + this.help;
	  		this.$http.post(url).then(res=>{
	  			if(res.data.code == '10000'){
	  				this.helplist = res.data.data;
	  			}else{
	  				Toast({
							message: res.data.mag,
							position: 'middle',
							duration: 3000
						})
	  			}
	  		}).catch(error=>{
		  			Toast({
						message: "网络异常",
						position: 'middle',
						duration: 3000
					})
	  		})
			}
	  }
  
}
</script>

<style scoped="scoped">
	.navigation{
		height: 1rem;
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid #E3E3E3;
		padding: 0 0.25rem;
		color: #323232;
		font-size: 0.36rem;
	}
	
	.navigation img{
		width: 0.2rem;
		height: 0.36rem;
		display: block;
	}	
	.way{
		border-bottom: 0.1rem solid #F2F2F2;
		border-top: 0.1rem solid #F2F2F2;
		padding: 0 0.25rem;
	}
	.way_d{
		margin: 0.12rem 0;
		overflow: hidden;
	}
	.way_d_d{
		width: 25%;
		margin: 0.05rem 4%;
		float: left;
		box-sizing: border-box;
		border: 1px solid #CCCCCC;
		color: #CBCBCB;
		font-size: 0.2rem;
		padding: 0.1rem 0.2rem;
		border-radius: 0.1rem;
		text-align: center;
	}
	.on{
		width: 25%;
		margin: 0.05rem 4%;
		float: left;
		box-sizing: border-box;
		border: 1px solid #FF2040;
		color: #ff2040;
		font-size: 0.2rem;
		padding: 0.1rem 0.2rem;
		border-radius: 0.1rem;
		text-align: center;
	}
	.title{
		padding: 0.2rem 0.25rem;
		border-bottom: 1px solid #C0C0C0;
		font-size: 0.26rem;
		color: #323232;
	}
</style>
